<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <!-- 横向柱状图 -->
      <el-col :span="12" class="chart-item">
        <div class="chart-title">横向柱状图</div>
        <div ref="horizontalBarChart" class="chart-wrapper"></div>
      </el-col>

      <!-- 常规柱状图（带下拉框） -->
      <el-col :span="12" class="chart-item">
        <div class="chart-header">
          <el-select v-model="barChart1Type" class="chart-select" @change="updateBarChart1">
            <el-option label="月度" value="month"></el-option>
            <el-option label="年度" value="year"></el-option>
          </el-select>
        </div>
        <div ref="barChart1" class="chart-wrapper"></div>
      </el-col>

      <!-- 常规柱状图（带下拉框） -->
      <el-col :span="12" class="chart-item">
        <div class="chart-header">
          <el-select v-model="barChart2Type" class="chart-select" @change="updateBarChart2">
            <el-option label="产品A" value="productA"></el-option>
            <el-option label="产品B" value="productB"></el-option>
          </el-select>
        </div>
        <div ref="barChart2" class="chart-wrapper"></div>
      </el-col>

      <!-- 饼图（带下拉框） -->
      <el-col :span="12" class="chart-item">
        <div class="chart-header">
          <el-select v-model="pieChartType" class="chart-select" @change="updatePieChart">
            <el-option label="地区分布" value="region"></el-option>
            <el-option label="渠道分布" value="channel"></el-option>
          </el-select>
        </div>
        <div ref="pieChart" class="chart-wrapper"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import * as echarts from 'echarts'

  export default {
    data() {
      return {
        barChart1Type: 'month',
        barChart2Type: 'productA',
        pieChartType: 'region',

        // 图表实例
        horizontalBarChart: null,
        barChart1Instance: null,
        barChart2Instance: null,
        pieChartInstance: null,

        // 静态数据
        horizontalBarData: {
          xData: ['产品A', '产品B', '产品C', '产品D', '产品E'],
          series: [120, 200, 150, 80, 70]
        },
        barChart1Data: {
          month: {
            xData: ['1月', '2月', '3月', '4月', '5月', '6月'],
            series: [120, 132, 101, 134, 90, 230]
          },
          year: {
            xData: ['2019', '2020', '2021', '2022', '2023'],
            series: [820, 932, 901, 934, 1290]
          }
        },
        barChart2Data: {
          productA: {
            xData: ['Q1', 'Q2', 'Q3', 'Q4'],
            series: [65, 59, 80, 81]
          },
          productB: {
            xData: ['Q1', 'Q2', 'Q3', 'Q4'],
            series: [28, 48, 40, 19]
          }
        },
        pieChartData: {
          region: [
            { value: 335, name: '华北' },
            { value: 310, name: '华东' },
            { value: 234, name: '华南' },
            { value: 135, name: '西部' }
          ],
          channel: [
            { value: 235, name: '线上' },
            { value: 310, name: '直销' },
            { value: 334, name: '代理' }
          ]
        }
      }
    },
    mounted() {
      this.initCharts()
    },
    beforeDestroy() {
      // 销毁图表实例
      if (this.horizontalBarChart) this.horizontalBarChart.dispose()
      if (this.barChart1Instance) this.barChart1Instance.dispose()
      if (this.barChart2Instance) this.barChart2Instance.dispose()
      if (this.pieChartInstance) this.pieChartInstance.dispose()
    },
    methods: {
      initCharts() {
        this.initHorizontalBarChart()
        this.initBarChart1()
        this.initBarChart2()
        this.initPieChart()
      },
      initHorizontalBarChart() {
        this.horizontalBarChart = echarts.init(this.$refs.horizontalBarChart)
        const option = {
          tooltip: {},
          xAxis: { type: 'value' },
          yAxis: { type: 'category', data: this.horizontalBarData.xData },
          series: [{
            type: 'bar',
            data: this.horizontalBarData.series,
            itemStyle: { color: '#5470c6' }
          }]
        }
        this.horizontalBarChart.setOption(option)
      },
      initBarChart1() {
        this.barChart1Instance = echarts.init(this.$refs.barChart1)
        const data = this.barChart1Data[this.barChart1Type]
        const option = {
          xAxis: { type: 'category', data: data.xData },
          yAxis: { type: 'value' },
          series: [{
            type: 'bar',
            data: data.series,
            itemStyle: { color: '#91cc75' }
          }]
        }
        this.barChart1Instance.setOption(option)
      },
      updateBarChart1() {
        const data = this.barChart1Data[this.barChart1Type]
        this.barChart1Instance.setOption({
          xAxis: { data: data.xData },
          series: [{ data: data.series }]
        })
      },
      initBarChart2() {
        this.barChart2Instance = echarts.init(this.$refs.barChart2)
        const data = this.barChart2Data[this.barChart2Type]
        const option = {
          xAxis: { type: 'category', data: data.xData },
          yAxis: { type: 'value' },
          series: [{
            type: 'bar',
            data: data.series,
            itemStyle: { color: '#fac858' }
          }]
        }
        this.barChart2Instance.setOption(option)
      },
      updateBarChart2() {
        const data = this.barChart2Data[this.barChart2Type]
        this.barChart2Instance.setOption({
          xAxis: { data: data.xData },
          series: [{ data: data.series }]
        })
      },
      initPieChart() {
        this.pieChartInstance = echarts.init(this.$refs.pieChart)
        const data = this.pieChartData[this.pieChartType]
        const option = {
          tooltip: { trigger: 'item' },
          series: [{
            type: 'pie',
            radius: '50%',
            data: data,
            emphasis: { itemStyle: { shadowBlur: 10 } }
          }]
        }
        this.pieChartInstance.setOption(option)
      },
      updatePieChart() {
        const data = this.pieChartData[this.pieChartType]
        this.pieChartInstance.setOption({
          series: [{ data }]
        })
      }
    }
  }
</script>

<style scoped>
  .dashboard-container {
    padding: 20px;
    height: 100vh;
  }

  .chart-item {
    height: 50vh;
    padding: 10px;
    position: relative;
  }

  .chart-wrapper {
    height: calc(100% - 40px);
    width: 100%;
  }

  .chart-title {
    height: 40px;
    line-height: 40px;
    font-weight: bold;
  }

  .chart-header {
    height: 40px;
    display: flex;
    align-items: center;
  }

  .chart-select {
    width: 120px;
    z-index: 1;
  }
</style>
